<template>
  <!-- 复查记录（申诉记录）-- 申诉详情 -->
  <view class="appealDetail">
    <view class="bgColor"></view>

    <view class="wrapper">
      <view class="blueTitle">
        {{ detail.companyInfo.companyName || "" }}
      </view>

      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">标准地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.standardAddress || "" }}
            </view>
          </view>
          <!-- <view class="facility-item">
            <view class="textAlign label">详细地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.addressDetail || "" }}
            </view>
          </view> -->
          <view class="facility-item">
            <view class="textAlign label">所属行业：</view>
            <view class="value valueName">
              {{ detail.informationInfo.informationName || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label watuo">负责人姓名：</view>
            <view class="value valueName">
              {{ detail.legalInfo.legalPersonName || "" }}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-barBlur">
          <view class="wrapper-bartitle"> 申诉详情 </view>
          <view class="wrapper-details"
            :data-url="`/keepArecord/nonRecord/nonRecord?taskId=${detail.policeCheckTaskInfo.id}&moneyFlag=0&reviewFlag=0`"
            @click="handleClickRouter">
            <u-icon name="attach" color="#2488F5"></u-icon>查看复查详情
          </view>
        </view>

        <view class="wrapper-body handling">
          <view class="fine-money" v-for="(v, index) of detail.policeCompanyComplainInfo
              .appealImageInfoList" :key="index">
            <image :src="imgPrefix + v.path" mode="" @click="pvwImage([imgPrefix + v.path])"></image>
          </view>
        </view>

        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="value">
              {{ detail.policeCompanyComplainInfo.companyContent || "" }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    companyComplainDetail
  } from "@/api/goover.js";
  import {
    findEnableDictItemsbyCode
  } from "@/api/api.js";
  import {
    handleClickRouter,
    pvwImage
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: {},
        detail: {},
        imgPrefix: "",
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList();

      findEnableDictItemsbyCode("static_server").then((res) => {
        let preFix = res.result.find(item => item.title === 'static_server_url').value;
        this.imgPrefix = preFix;
      });
    },
    methods: {
      handleClickRouter,
      pvwImage,
      getList() {
        companyComplainDetail({
          id: this.options.id
        }).then((res) => {
          if (res.code == 200) {
            this.detail = res.result || {};
          }
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .appealDetail {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
    }

    .appealDetail-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;

      .blueTitle {
        padding: 20rpx 40rpx;
        border-radius: 10rpx 10rpx 0 0;
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
        background: #ecf9ff;
      }

      .wrapper-item {
        margin-bottom: 2vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-bar {
          display: flex;
          justify-content: space-between;
          height: 40rpx;

          .wrapper-bartitle {
            font-size: 30rpx;
            font-weight: bold;

            text {
              display: inline-block;
              margin-left: 8px;
              color: #ababab;
              font-size: 28rpx;
            }
          }
        }

        .wrapper-body {
          padding-top: 20px;
        }

        .handling {
          display: flex;
          justify-content: space-between;
          padding-bottom: 20rpx;
          color: #212020;

          // > view {
          //   padding-bottom: 20rpx;
          // }

          .fine-money {
            width: 190rpx;
            height: 180rpx;

            image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .fine-money:last-child {
            padding-bottom: 0rpx;
          }

          // &::after {
          //   content: "";
          //   width: 190rpx;
          // }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
      }
    }
  }
</style>